<template>
  <div>
    <h3>商品分类</h3>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 添加分类按钮区域 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="addCate">添加分类</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 分类表格  -->
    <!-- 
        data 渲染表格数据源
        columns 表格配置信息
        selection-type 是否有复选框
        expand-type 是否展开显示
        showindex 是否显示索引
        index-text 索引列表头
        border
       -->
    <tree-table
      :data="cateList"
      :columns="columns"
      :selection-type="false"
      :expand-type="false"
      show-index
      index-text="#"
      border
      :show-row-hover="false"
    >
      <template slot="isOk" slot-scope="data">
        <i
          class="el-icon-success"
          style="color: seagreen"
          v-if="data.row.cat_deleted === false"
        ></i>
        <i class="el-icon-error" style="color: orange" v-else></i>
      </template>
      <template slot="order" slot-scope="data">
        <el-tag size="mini" v-if="data.row.cat_level === 0">一级</el-tag>
        <el-tag type="success" size="mini" v-else-if="data.row.cat_level === 1"
          >二级</el-tag
        >
        <el-tag type="warning" size="mini" v-else>三级</el-tag>
      </template>
      <template slot="opt" slot-scope="data">
        <!-- 编辑按钮 -->
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="editGoodsCate(data)"
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="deleteGoodsCate"
        ></el-button>
      </template>
    </tree-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="cateInfo.pagenum"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="cateInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 点击添加用户提示框 -->
    <el-dialog
      title="提示"
      :visible.sync="isAddCate"
      width="50%"
      :before-close="handleClose"
      @close="onClose"
    >
      <!-- 表单区域 -->
      <el-form
        :model="addModel"
        :rules="addRules"
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addModel.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类" prop="cat_pid">
          <!-- option绑定数据源 -->
          <!-- props绑定级联选择的名字和值 -->
          <el-cascader
            v-model="addModel.cat_pid"
            :options="parentCateList"
            @change="handleChange"
            :props="cateProps"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAddCate = false">取 消</el-button>
        <el-button type="primary" @click="doAddCate">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击修改商品信息提示框 -->
    <el-dialog
      title="提示"
      :visible.sync="isEditCate"
      width="50%"
      @close="onClose"
    >
      <!-- 表单区域 -->
      <el-form
        :model="editModel"
        ref="editForm"
        label-width="100px"
        class="demo-ruleForm"
        :rules="addRules"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editModel.cat_name"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditShow = false">取 消</el-button>
        <el-button type="primary" @click="doEidt">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Service } from '../../service'
export default {
  data() {
    return {
      // 分类列表
      cateList: [],
      // 分类列表的父级
      parentCateList: [],
      // 设置查询分类列表的属性
      cateInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
      // 设置表格列
      columns: [
        { label: '分类名称', prop: 'cat_name' },
        {
          label: '是否有效',
          type: 'template',
          template: 'isOk',
        },
        {
          label: '排序',
          type: 'template',
          template: 'order',
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt',
        },
      ],
      // 选中的数组
      selectedKeys: [],
      // 开启编辑弹窗
      isEditCate: false,
      // 开启删除弹窗
      isDeleteCate: false,
      // 开启添加弹窗
      isAddCate: false,
      // 编辑弹窗绑定的数据
      editModel: {
        cat_name: '',
        id: -1,
      },
      // 添加弹窗绑定的数据
      addModel: {
        cat_name: '',
        cat_pid: [],
        cat_level: 1,
      },
      // 添加数据规则
      addRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ],
      },
      // 设置级联选择框的绑定名字和值
      cateProps: {
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id',
        checkStrictly: true,
      },
    }
  },
  created() {
    this.getCategories()
  },
  methods: {
    // 1.获取商品类别列表
    async getCategories() {
      const res = await Service.getCategories(this.cateInfo)
      if (res.data.meta.status !== 200) {
        this.$message.error(res.data.meta.msg)
      } else {
        this.$message.success(res.data.meta.msg)
        this.cateList = res.data.data.result
        this.total = res.data.data.total
      }
    },
    // 2.开启编辑商品类别
    editGoodsCate(data) {
      this.isEditCate = true
      this.editModel.cat_name = data.row.cat_name
      this.editModel.id = data.row.cat_id
    },
    // 确认修改
    async doEidt() {
      this.isEditCate = false
      const res = await Service.editCate(
        this.editModel.id,
        this.editModel.cat_name
      )
      if (res.data.meta.status !== 200) {
        this.$message.error(res.data.meta.msg)
      } else {
        this.$message.success(res.data.meta.msg)
        this.getCategories()
      }
    },
    // 3.开启删除商品类别
    deleteGoodsCate() {
      this.isDeleteCate = true
    },
    // 根据页容量渲染列表
    handleSizeChange(newSize) {
      //pagesize改变时触发，当pagesize发生改变的时候，我们应该
      //以最新的pagesize来请求数据并展示数据
      this.cateInfo.pagesize = newSize
      //重新按照pagesize发送请求，请求最新的数据
      this.getCategories()
    },
    // 页码改变,重新渲染列表
    handleCurrentChange(current) {
      //页码发生改变时触发当current发生改变的时候，我们应该
      //以最新的current页码来请求数据并展示数据
      this.cateInfo.pagenum = current
      //重新按照pagenum发送请求，请求最新的数据
      this.getCategories()
    },
    // 关闭弹窗
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch((error) => {
        })
    },
    // 清除表单数据
    onClose() {
      this.$refs.addForm && this.$refs.addForm.resetFields()
      this.$refs.changeRoleForm && this.$refs.changeRoleForm.resetFields()
      this.$refs.editForm && this.$refs.editForm.resetFields()
    },
    // 添加分类逻辑
    addCate() {
      this.isAddCate = true
      this.getFatherCate()
    },
    // 确定添加分类
    async doAddCate() {
      this.isAddCate = false
      const res = await Service.addCate(this.addModel)
      if (res.data.meta.status !== 201) {
        this.$message.error(res.data.meta.msg)
      } else {
        this.$message.success(res.data.meta.msg)
      }
    },
    // 打开添加分类对话框,获取父级数据分类列表
    async getFatherCate() {
      const res = await Service.getParentCategories()
      if (res.data.meta.status !== 200) {
        this.$message.error(res.data.meta.msg)
      } else {
        this.$message.success(res.data.meta.msg)
        this.parentCateList = res.data.data
      }
    },
    // 级联父类选择框的选中事件
    handleChange() {
      // 分类级别等级等于数组的长度
      this.addModel.cat_level = this.addModel.cat_pid.length
      // 将亲父级分类id赋值给pid
      this.addModel.cat_pid =
        this.addModel.cat_pid[this.addModel.cat_pid.length - 1]
    },
  },
}
</script>

<style scoped>
</style>